<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.switchTab('/pages/user/user')"></view>
				<view class="header-title">{{title}}</view>
			</view> 
		</view> 
		
		<view class="balance">
			<view class="balance-top">
				<view class="integral">
					<view class="integral-list">
						<view class="integral-list__item">
							<view class="left">
								<view class="info">{{title}}</view>
								<view class="number">{{ userMoney.validNum1 || 0}}</view>
								<view class="btnBox">
									<view class="btn" @tap.stop="$tools.jump('./transfer',coinType)">转账</view>
									<view class="btn" v-if="Number(this.systemParam.WITHDRAWAL_OPEN_OR_CLOSE) ==2" @tap.stop="$tools.jump('./withdrawal','balance')">提现</view>
								</view>
							</view>
							<image class="img" src="@/static/public/icon-balance.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
			<view class="record">
				<!-- <view class="sort">
					<picker mode="date" :value="date" fields="month" @change="bindDateChange">
						<view class="uni-input">{{dateShow}}</view>
					</picker>
					<image class="ico" src="@/static/public/icon-down.png" mode=""></image>
				</view> -->
				<view class="tab">
					<view :class="['item',currIndex==0?'active':'']" @tap.stop="changeTab(0,1)">收入</view>
					<view :class="['item',currIndex==1?'active':'']" @tap.stop="changeTab(1,-1)">支出</view>
				</view>
			<view class="record-wrapper" v-if="isShowPage">
				<scroll-view scroll-y="true" class="record-height" 
				v-if="recordsList.length != 0"
				@scrolltolower="lower()">
					<view class="record-item record-bg" v-for="(item,index) in recordsList" :key="index"
					>
						<view class="record-left">
						<view class="record-title">{{ getSourceType(item.sourceType) }}</view>
						</view>
						<view class="record-right">
							<view class="record-num">{{ item.changeBalance }}</view>
							<view class="record-time record-time--nowrap">{{ item.createTime }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 20,
				recordsList: [],
				coinType:4,
				title:'',
				coninTypeArr:[
					{type:1,name:'余额'},
					{type:2,name:'兑换消费券'},
					{type:3,name:'消费券'},
					{type:4,name:'贡献值'},
					{type:5,name:'锁定消费券'},
					{type:6,name:'分红消费券'},
				],
				dateShow:'',
				date:'',
				userMoney: {},
				currIndex:0,
				rax:1,
				totalPoint:0,
				isRead:0, // 是否已看,0-未看，2-已看
				videoSrc:'',
				totalDuration: 0, // 视频总时长（秒）
				currentTime: 0, // 当前播放时长（秒）
				remainingTime: 0, // 格式化后的剩余时间
				showClose:false,
				systemParam: {},
			}
		},
		computed:{
// 	1.转账 2.买入 3.卖出 4.静态收益 5.分享奖励 6.推荐分红 7.团队分红 8.购买商品
//  * 9.重消手续费 10.赠送积分 11.团队奖励 12.分红股东奖励 13.共振奖励 14.分享奖 15.推荐奖 16.赠送消费券
//  * 17.线下提现 18.提现失败 19.共振节点奖励 20.节点锁仓释放 21.排单节点分红 22.挂卖单手续费股东分红 23.积分挂卖单 24.QFB挂买单手续费
//  * 25.交易 26.订单完成 27.取消订单 28.链上充值 29.线上提现 30.线上提现失败 31.聊天 99-系统修改
			getSourceType(){
				return function(type){
					switch (type){
						case 1:
							return '转账';
							break;
						case 2:
							return '买入';
							break;
						case 3:
							return '卖出';
							break;
						case 4:
							return '静态收益';
							break;
						case 5:
							return '推荐收益';
							break;
						case 6:
							return '推荐分红';
							break;
						case 7:
							return '团队分红';
							break;
						case 8:
							return '购买商品';
						case 9:
							return '重消手续费';		
							break;
						case 10:
							return '赠送积分';		
							break;
						case 11:
							return '团队奖励';		
							break;	
						case 12:
							return '分红股东奖励';		
							break;	
						case 13:
							return '共振奖励';		
							break;	
						case 14:
							return '分享奖';		
							break;
						case 15:
							return '推荐奖';		
							break;		
						case 16:
							return '赠送消费券';		
							break;	
						case 17:
							return '线下提现';		
							break;			
						case 18:
							return '提现失败';		
							break;
						case 19:
							return '共振节点奖励';		
							break;	
						case 20:
							return '节点锁仓释放';		
							break;	
						case 21:
							return '排单节点分红';		
							break;		
						case 22:
							return '挂卖单手续费股东分红';		
							break;		
						case 23:
							return '积分挂卖单';		
							break;		
						case 24:
							return 'QFB挂买单手续费';		
							break;		
						case 25:
							return '交易';		
							break;										
						case 26:
							return '订单完成';		
							break;		
						case 27:
							return '取消订单';		
							break;		
						case 28:
							return '链上充值';		
							break;		
						case 29:
							return '线上提现';		
							break;		
						case 30:
							return '线上提现失败';		
							break;		
						case 31:
							return '聊天';		
							break;		
						case 99:
							return '系统拨付';
							break;
					}
				}
			},
		},
		onLoad(options) {
			if(options){
				this.coinType = options.value1
				this.title = options.value2
			}
		},
		onShow() {
			this.init();
			// if(this.coinType==3){
			// 	this.getTotal()
			// }
		},
		onReachBottom() {
			console.log("ddd");
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getRecord();
			}
		},
		methods: {
			getCoinType(){
				const type = this.coinType
				const typeName = this.coninTypeArr.filter(item=>item.type == type)[0].name
				console.log('typeName',typeName)
				return typeName;
			},
			init(){
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.recordsList = [];
				this.getRecord();
				this.getUserMoney();
				this.getSystemParam();
			},
			// 记录
			getRecord(){
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					coinType:this.coinType,
					sourceType:'',
					// month:this.date,
					rax:this.rax
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/getUserMoneyLogList',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.recordsList = this.recordsList.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
			changeTab(index,type){
				if(this.currIndex !=index){
					this.currIndex = index
					this.rax = type
					this.init()
				}
			},
			bindDateChange(e){
				const time = (e.detail.value).split('-')
				console.log(e,time)
				this.date = e.detail.value +'-01'
				this.dateShow = time[0]+'年'+time[1]+'月'
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
.balance{
	&-top{
			background: url('@/static/public/balanceBg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 20rpx 30rpx 0;
			.img{
				width: 232rpx;
			}
			.asset{
				@include flexCenterColumn;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.num{
					font-family: DIN, DIN;
					font-weight: 700;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 22rpx 0;
				}
			}
			.integral{
				&-list{
					@include flexBetween;
					&__item{
						@include flexBetween;
						.left{
							@include flexLeftColumn;
						}
						height: 235rpx;
						padding: 40rpx;
						width: 100%;
						.info{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
						}
						.number{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 44rpx;
							color: #FFFFFF;
							margin-top: 20rpx;
						}
						.btnBox{
							@include flexBetween;
							margin-top: 20rpx;
							.btn{
								height: 58rpx;
								line-height: 58rpx;
								background: #FFFFFF;
								border-radius: 84rpx;
								font-size: 28rpx;
								color: #FA6A45;
								padding: 0 40rpx;
								margin-right: 16rpx;
							}
						}
					}
					.line{
						width: 0rpx;
						height: 66rpx;
						border: 2rpx solid rgba(255,255,255,0.41);
					}
				}
			}
		}
}
.tab{
	margin-top: 24rpx;
	height: 96rpx;
	background: #fff;
	@include flexBetween;
	.item{
		width: 50%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		position: relative;
	}
	.active{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}
	.active::after{
		content: '';
		display: block;
		width: 80rpx;
		height: 8rpx;
		background: #AD2926;
		border-radius: 70rpx;
		position: absolute;
		bottom: 0;
		left: calc(50% - 40rpx);
	}
}
.content{
	@include flexLeft;
	margin: 20rpx 30rpx 0;
	.item{
		width: calc((100% - 20rpx) / 2);
		margin-left: 10rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 24rpx;
		text-align: center;
		height: 162rpx;
		@include flexCenterColumn;
		.txt{
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			// line-height: 30rpx;
			@include flexCenter;
		}
		.num{
			font-weight: 500;
			font-size: 32rpx;
			color: #EE3A33;
			// line-height: 44rpx;
			margin-top: 24rpx;
		}
		.ico{
			width: 32rpx;
			height: 32rpx;
			margin-left: 5rpx;
		}
	}
	.item:nth-of-type(1){
		margin-left: 0;
	}
}
	.record{
		.sort{
			background: #FFFFFF;
			box-shadow: none;
			margin:  24rpx;
			padding: 36rpx 32rpx;
			@include flexLeft;
			.ico{
				width: 32rpx;
				height: 32rpx;
			}
		}
		&-wrapper{
			margin-top:  24rpx;
			padding: 36rpx 32rpx;
			background: #FFFFFF;
			box-shadow: none;
			// border-radius: 16rpx;
		}
		&-bg{
			box-shadow: none;
		}
		&-item{
			
		}
		&-text{
			margin-top: 36rpx;
		}
		&-status{
			margin-top: 22rpx;
		}
		&-timeBox{
			margin: 30rpx 20rpx 0;
			padding: 0rpx 0 28rpx;
		}
	}	
	// 视频播放弹窗
.modal-bg{
	width: 100%;
	height: 100%;
	background: rgba($color: #000000, $alpha: 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow: hidden;
}
.modal,/deep/ .uni-popup__wrapper-box{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-box{
	width: 100%;
	height: 100%;
	background: #000;
	padding: 20rpx;
	padding-top: 60rpx;
	position: relative;
	overflow: hidden;
	.txt{
		font-size: 14px;
		color: #fff;
		background: rgba(95, 84, 84 , 0.6);
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 100%;
		// z-index: 999999;
		// position: absolute;
		// top: 80rpx;
		// left: 20rpx;
	}
	.close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 80rpx;
		right: 20rpx;
	}
	.video{
		width: 100%;
		height: 100%;
		margin-top: 0rpx;
	}
}
</style>